<!-- 
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="revenueInfoOne_box">
    <revenueInFoTitle :title="'盈利统计'">
      <p>2023年第一季度盈利</p>
    </revenueInFoTitle>
    <div class="revenueInfoOne_echarts">
      <div class="One_echarts_one publiv_echats">
        <el-progress type="circle" :percentage="64" :show-text="false" ></el-progress>
        <progressColor style="width: 0;height: 0;"></progressColor>
        <div class="revenueInfoOne_text Info_te_pul">
          <div class="info_format">
            <span class="numBiti">64</span>
            <span class="Info_danwei">%</span>
          </div>
          <div class="Info_text">报名费用</div>
        </div>
      </div>
      <div class="One_echarts_two publiv_echats">
        <el-progress type="circle" :percentage="10" :show-text="false"></el-progress>
        <div class="revenueInfoOne_text Info_te_pul">
          <div class="info_format">
            <span class="numBiti">10</span>
            <span class="Info_danwei">%</span>
          </div>
          <div class="Info_text">停车费</div>
        </div>
      </div>
      <div class="One_echarts_three publiv_echats">
        <el-progress type="circle" :percentage="26" :show-text="false"></el-progress>
        <div class="revenueInfoOne_text Info_te_pul">
          <div class="info_format">
            <span class="numBiti">26</span>
            <span class="Info_danwei">%</span>
          </div>
          <div class="Info_text">其他</div>
        </div>
      </div>
    </div>
    <div class="revenueInfoOne_footer">
      备注：其他盈利包括广告费、活动赞助费等等
    </div>
  </div>
</template>

<script>
import progressColor from '@/components/progress-color.vue'
import revenueInFoTitle from '../../componentsPage/revenueInFoTitle.vue'
export default {
  name: "revenueInfoOne",
  components:{
    progressColor,
    revenueInFoTitle
  },

  data() {
    return {};
  },
  methods: {
    formatOne(pe) {
      return "";
    },
  },
};
</script>

<style scoped lang="less">
.revenueInfoOne_box {
  width: 700px;
  height: 350px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(17, 26, 52, 0.1);
  .revenueInfoOne_echarts {
    width: 100%;
    display: flex;
    .publiv_echats {
      // background-color: yellow;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .Info_te_pul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .info_format {
          text-align: center;
          margin-bottom: 10px;
          .numBiti {
            font: bold 28px/22px "PingFang SC";
            margin-right: 3px;
          }
          .Info_danwei {
            font: 500 16px/18px "PingFang SC";
          }
        }
        .Info_text {
          text-align: center;
          font: 400 14px/18px "PingFang SC";
          color: #4e4c4c;
        }
      }
    }
    .One_echarts_one{
      /deep/ .el-progress-circle {
        // 进度条颜色
        svg > path:nth-child(2) {
          stroke: url(#dismantle);  // 该url() 中填入的是, 对应组件中的 id 名
        }
      }
    }
    .One_echarts_two {
      margin: 0px 10px;
      /deep/ .el-progress-circle {
        // 进度条颜色
        svg > path:nth-child(2) {
          stroke: url(#blue);  // 该url() 中填入的是, 对应组件中的 id 名
        }
      }
    }
    .One_echarts_three {
      /deep/ .el-progress-circle {
        // 进度条颜色
        svg > path:nth-child(2) {
          stroke: url(#color3);  // 该url() 中填入的是, 对应组件中的 id 名
        }
      }
    }
  }
  .revenueInfoOne_footer {
    width: 100%;
    font: 400 14px/18px "PingFang SC";
    // background-color: bisque;
  }
}
/deep/.el-progress-circle {
  width: 150px !important;
  height: 150px !important;
}
</style>
